<template>
  <div>
    <el-card style="margin: 20px">
      <!-- <el-form>
      <el-row>
        <el-col span="6">
          <el-form-item label="标签名称" label-width="80px">
            <el-input placeholder="请输入" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="6">
          <el-form-item label="城市" label-width="80px">
            <el-select placeholder="请选择" size="small" style="width: 100%">
              <el-option> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="6">
          <el-form-item label="地区" label-width="80px">
            <el-select placeholder="请选择" size="small" style="width: 100%">
              <el-option> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="6">
          <el-form-item label="企业简称" label-width="80px">
            <el-input size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="6">
          <el-form-item label="状态" label-width="80px">
            <el-select placeholder="请选择" size="small" style="width: 100%">
              <el-option> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="6">
          <el-button size="small" style="margin-left: 40px">清除</el-button>
          <el-button type="primary" size="small">搜索</el-button>
        </el-col>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          style="margin-left: 720px"
          >新增用户</el-button
        >
      </el-row>
    </el-form> -->
      <el-alert title="共 20 条记录" type="info" show-icon> </el-alert>
      <el-table :data="form">
        <el-table-column
          label="序号"
          align="center"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="企业编号"
          align="center"
          prop="number"
        ></el-table-column>
        <el-table-column
          label="企业简称"
          align="center"
          prop="shortName"
        ></el-table-column>
        <el-table-column
          label="标签"
          align="center"
          prop="tags"
        ></el-table-column>
        <el-table-column
          label="创建者"
          align="center"
          prop="creatorID"
        ></el-table-column>
        <el-table-column
          label="创建日期"
          align="center"
          prop="addDate"
        ></el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="remarks"
        ></el-table-column>
        <el-table-column label="状态" align="center" prop="state">
          <template #default="{ row }">
            {{ row.state ? "启用" : "禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              icon="el-icon-edit"
              plain
              circle
              type="primary"
              size="small"
              @click="edit(row)"
            ></el-button>

            <el-button
              plain
              circle
              :type="row.state ? 'warning' : 'success'"
              :icon="row.state ? 'el-icon-close' : 'el-icon-check'"
              size="small"
              @click="change(row)"
            ></el-button>
            <el-button
              icon="el-icon-delete"
              plain
              circle
              type="danger"
              size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form>
        <el-form-item label="企业名称" label-width="80px">
          <el-input style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" label-width="80px">
          <el-input style="width: 80%"></el-input>
        </el-form-item>
        <span style="margin-left: 80px"
          >https://www.tianyancha.com （在此可查询所属公司全称及简称）</span
        >
        <el-form-item
          label="
         城市"
          label-width="80px"
        >
          <el-select>
            <el-option></el-option>
          </el-select>
          <el-select style="margin-left: 20px">
            <el-option></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, disabled } from "@/api/hmmm/companys";
export default {
  created() {
    this.list();
  },
  data() {
    return {
      data: {
        page: 1,
        pagesize: 10,
      },
      form: [],
      dialogVisible: false,
      title: "",
      // form1: {
      //   id: "",
      //   isFamous: null,
      //   remarks: "",
      //   addDate: "",
      //   creatorID: "",
      //   tags: "",
      //   shortName: "",
      //   number: "",
      // },
    };
  },
  methods: {
    async change(row) {
      this.$confirm("已成功启用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已成功启用, 是否继续?",
          });
          const res = disabled({
            id: row.id,
            state: row.state === 0 ? 1 : 0,
          });
          console.log(res);
          this.list();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async list() {
      const {
        data: { items },
      } = await list(this.data);
      this.form = items;
      // console.log(this.form);
    },
    edit(row) {
      console.log(row);
      this.title = "编辑用户";
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss"></style>
